<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/start' }">企业后台</el-breadcrumb-item>
      <el-breadcrumb-item>公司缴费台账</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <!-- 搜索框 -->
        <el-col :span="8">
          <el-input
            placeholder="请输入账单号进行搜索"
            v-model="input"
            clearable
            size="medium"
          >
            <el-button
              type="primary"
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 充值按钮 -->
        <el-col :span="8">
          <el-button type="primary" @click="pays()" style="margin-left: 16px"
            >充值</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%" border >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="number" label="订单号"> </el-table-column>
        <el-table-column prop="time" label="缴费日期"> </el-table-column>
        <el-table-column prop="money" label="缴费金额"> </el-table-column>
        <el-table-column prop="month" label="服务期数（月）"> </el-table-column>
        <el-table-column prop="begin" label="开始时间"> </el-table-column>
        <el-table-column prop="end" label="结束时间"> </el-table-column>
        <el-table-column prop="people" label="销售经办人"> </el-table-column>
        <el-table-column prop="tell" label="联系电话"> </el-table-column>
        <el-table-column prop="other" label="备注"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"> </el-switch>
          </template>
        </el-table-column>
      </el-table>

      <!-- 充值 -->
      <el-dialog title="充值" :visible.sync="el_pay">
        <el-form label-width="120px" label-left="0px">
          <el-form-item label="账户余额：0元"> </el-form-item>
          <el-form-item label="订单号：" prop="number1">
            <el-input v-model="pay.number1"></el-input>
          </el-form-item>
          <el-form-item label="充值金额：" prop="money">
            <el-input v-model="pay.money"></el-input>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-radio v-model="radio" label="1">
              <a style="font-size: 20px">
                <a-icon type="alipay-square" theme="filled" />
              </a>
              &nbsp;支付宝
            </el-radio>
            <el-radio v-model="radio" label="2">
              <a style="font-size: 20px">
                <a-icon type="bank" theme="filled" />
              </a>
              &nbsp;网上银行 </el-radio
            ><br />
            <img class="img1" src="~@/assets/b1.png" alt="" />
            <img  src="~@/assets/b2.png" alt="" /><br />
            <img class="img1" src="~@/assets/b3.png" alt="" />
            <img src="~@/assets/b4.png" alt="" />
          </el-form-item>
          <el-form-item>
            <span class="icon-zhongguoyinhang" style="font-size: 30px"></span>
            <span
              class="icon-zhongguoyouzhengchuxuyinhang"
              style="font-size: 30px"
            ></span>
          </el-form-item>
          <el-form-item>
            <span class="icon-jiansheyinhang" style="font-size: 50px"></span>
          </el-form-item>
          <!-- 底部区域 -->
          <el-form-item>
            <el-button type="primary" @click="pushs()">确定支付</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[6, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="6"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchs: [],
      input: null,
      // 支付方式
      radio: {
        radio: '1',
        lable: '1',
      },
      pay: {
        number1: '',
        money: '',
      },
      // 查找列表
      searchtableData: [
        {
          number: '741852961',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 0,
        },
        {
          number: '741852962',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 1,
        },
        {
          number: '741852963',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 2,
        },
        {
          number: '741852964',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 3,
        },
        {
          number: '741852965',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 4,
        },
        {
          number: '741852966',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 5,
        },
      ],
      el_pay: false,
      // 显示列表
      tableData: [
        {
          number: '741852961',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 0,
        },
        {
          number: '741852962',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 1,
        },
        {
          number: '741852963',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 2,
        },
        {
          number: '741852964',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 3,
        },
        {
          number: '741852965',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 4,
        },
        {
          number: '741852966',
          time: '2020-12-31',
          money: '10000',
          month: '3',
          begin: '2020-12-01',
          end: '2020-12-20',
          people: '刘能',
          tell: '1008611',
          other: '钱多人傻',
          id: 5,
        },
      ],
      el_show: false,

      el_xiu: false,
      number: '',
      time: '',
      money: '',
      month: '',
      begin: '',
      end: '',
      people: '',
      tell: '',
      other: '',
      newtable: {
        number: '',
        time: '',
        money: '',
        month: '',
        begin: '',
        end: '',
        people: '',
        tell: '',
        other: '',
      },
      formLabelWidth: '120px',
      newid: 0,

      // 充值
      drawer: false,
      direction: 'rtl',

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    }
  },
  methods: {
    // 充值
    pay_err: function () {
      this.el_pay = false
    },
    pays: function (val) {
      this.el_pay = true
    },
    pushs() {
      this.$message({
        message: '支付成功',
        type: 'success',
      })
    },

    // 分页

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 查找
    search: function () {
      console.log(this.input)
      this.tableData.map((item) => {
        if (this.input == null || this.input == '') {
          this.tableData = this.searchtableData
          return
        } else if (item.number.includes(this.input)) {
          this.searchs = []
          this.searchs.push(item)
          console.log(this.searchs)
          this.tableData = this.searchs
          console.log(this.tableData)
          return
        }
      })
    },
  },
}
</script>
<style scoped>
img {
  cursor: pointer;
}
.img1 {
  margin-left: 80px;
}
img:hover {
  z-index: 10px;
  box-shadow: 5px gray;
}
/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>